<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8" isELIgnored="false"%>
<%@ include file="/WEB-INF/views/shared/taglib.jsp"%>

<c:forEach items="${folderCatalogs}" var="folderCatalog">
	<div class="col-sm-2 text-center" style="padding-top: 15px;padding-bottom: 5px;height:100px;">
		<div class="folder-container" data-level="${folderCatalog.level}" data-id="${folderCatalog.id}" data-showName="${folderCatalog.showName}" data-toggle="context" data-target=".folder-context-menu" style="max-width:120px;">
			<div style="">
				<i class="icon icon-folder" style="font-size:60px;color:#77D1f9;"></i>
			</div>
			<div class="">
				<span>${folderCatalog.showName}</span>
			</div>
		</div>
	</div>
</c:forEach>
<c:forEach items="${fileCatalogs}" var="fileCatalog">
	<div class="col-sm-2 text-center" style="padding-top: 15px;padding-bottom: 5px;height:100px;">
		<div class="file-container" data-showName="${fileCatalog.showName}" data-id="${fileCatalog.id}" data-toggle="context" data-target=".file-context-menu" style="max-width:120px;">
			<a href="<c:url value='/admin/download/file?catalogId=${fileCatalog.id}'/>  " target="_blank">
				<div style="padding-top:8px;padding-bottom: 5px;">
					<i class="icon icon-file-empty2" style="font-size:50px;color:#9d4A0e;"></i>
				</div>
				<div class="">
					<span>${fileCatalog.showName}</span>
				</div>
			</a>
		</div>
	</div>
</c:forEach>
<div class="context-menu folder-context-menu">
	<ul class="dropdown-menu">
		<li><a href="#">共享</a></li>
		<li><a href="#">复制到</a></li>
		<li><a href="#">移动到</a></li>
		<li class="divider"></li>
		<li><a href="#">重命名</a></li>
		<li><a href="#">删除</a></li>
		<li class="divider"></li>
		<li><a href="#">查看属性</a></li>
	</ul>
</div>
<div class="context-menu file-context-menu">
	<ul class="dropdown-menu">
		<li><a href="#" id="openQRCode">二维码</a></li>
		<li><a href="#">共享</a></li>
		<li><a href="#">复制到</a></li>
		<li><a href="#">移动到</a></li>
		<li class="divider"></li>
		<li><a href="#">重命名</a></li>
		<li><a href="#">删除</a></li>
		<li class="divider"></li>
		<li><a href="#">查看属性</a></li>
	</ul>
</div>
<script type="text/javascript">
$(function(){
	$(".folder-container").on("click",function(){
		var showName=$(this).attr("data-showName");
		var id=$(this).attr("data-id");
		var level=$(this).attr("data-level");
		
		setNextPath(showName,id);
		
		$("#parentId").val(id);
		$("#parentLevel").val(level);
		
		loadOutput();
	});
});

$(function(){
	//$('.context-menu.file-context-menu').on();
	$(".file-container").contextmenu({
		target:".file-context-menu",
		onItem:function(context,e){
			var fileId=$(context).attr("data-id");
			var showName=$(context).attr("data-showName");
			openQRCode(showName,fileId);
		}
	});
})

function openQRCode(showName,fileId){
	var url=$.getVirtualPath()+"/admin/file/fileCatalog/qrCode?fileId="+fileId;
	top.swal({
		title:showName,
        text: "<img style='width:300px;height:300px;' src='"+url+"' />",
        html: true,
        confirmButtonText : "确定",
        confirmButtonColor: "#2196F3"
    });
}
</script>

<%@ include file="/WEB-INF/views/shared/base/scripts/limitless/default/extensions/contextmenu.jsp"%>